/**
 * Created by sunzhijun on 2019/02/19.
 */
import React, {Component} from 'react';
import { base } from 'nc-lightapp-front';
import ReferSearch from 'src/hrpub/common/components/referSearch/org';
import NCBackBtn from "src/hrpub/common/components/hr-back/index";
const { NCSelect, NCDatePicker } = base;
const NCOption = NCSelect.NCOption;
const {NCRangePicker} = NCDatePicker;
import './index.less';

class Header extends Component{
    constructor(props){
        super(props);
        this.state = {
            isCardFormPage : false, //是否是cardFormPage及显示分页器
            isCardPaginationVisible: false, //是否显示卡片翻页区域
            orderStatus: ['-1', '3'],
            timeRange: 'oneWeek',
            time: {
                "beginTime":"",
                "billStatus":"all",
                "endTime":"",
                "time":"oneWeek"
            },
            timerRangeValue: []
        }
        this.showHeadLeftFn = this.showHeadLeftFn.bind(this);
        this.handleBackBtn = this.handleBackBtn.bind(this);
        this.setCardPagination = this.setCardPagination.bind(this);
        this.setCardPaginationVisibleFn = this.setCardPaginationVisibleFn.bind(this);
        this.getCardFormId = this.getCardFormId.bind(this);
        this.setOrganizationValue = this.setOrganizationValue.bind(this);
        this.changeOrderStatus = this.changeOrderStatus.bind(this);
        this.changeOrderRange = this.changeOrderRange.bind(this);
        this.changeOrderTime = this.changeOrderTime.bind(this);
    }

    //查询主组织 节点信息
    searchOrganization(val) {
        this.setState({
            orgValue: val
        },()=>{
            this.props.searchOrganizationChange && this.props.searchOrganizationChange(val);
        })
    }

    //给组织赋值
    setOrganizationValue(orgData){
        this.setState({
            orgValue: orgData
        })
    }

    // 获取选择范围状态列表内容
    getOrderStatusList (){
        let { json } = this.props;
        if( JSON.stringify(json) !== '{}' ){
            let orderStatusList = [{
                key: 'all',
                    label: json['hrcm-000052'], // 全部
                }, {
                    key: '-1',
                    label: json['hrcm-000053'], // '自由态'
                }, {
                    key: '3',
                    label: json['hrcm-000054'], // 提交
                }, {
                    key: '2',
                    label: json['hrcm-000055'], // 审批进行中
                }, {
                    key: '1',
                    label: json['hrcm-000056'], // 审批通过
                }, {
                    key: '0',
                    label: json['hrcm-000057'], // 审批未通过
                }
            ]
            return orderStatusList;
        }
    }
    // 获取选择范围时间列表内容
    getTimeRangeList () {
        let { json } = this.props;
        if( JSON.stringify(json) !== '{}'  ){
            let timeRangeList = {
                'oneWeek': json['hrcm-000058'], // 一周内
                'oneMonth': json['hrcm-000059'], // 一个月内
                'threeMonth': json['hrcm-000060'], // 三个月内
                'custom': json['hrcm-000061'], // 自定义
            }
            return timeRangeList;
        }
    }

    // 头部筛选框选择单据状态
    changeOrderStatus (value, status){
        let selectVal = [];
        if( status.includes('all') && value.length > 1){
            value.map((item, index)=>{
                if(item !== 'all'){
                    selectVal.push(item)
                }
            })
            this.setState({
                orderStatus: selectVal
            },()=>{
                this.combileChangeOrder();
            })
        }else{
            if(value.includes('all')){
                this.setState({
                    orderStatus: ['all']
                },()=>{
                    this.combileChangeOrder();
                })
            }else{
                this.setState({
                    orderStatus: value
                },()=>{
                    this.combileChangeOrder();
                })
            }
        }
    }
    // 头部筛选框选择单据时间范围
    changeOrderRange (range){
        // debugger
        let { time, orderStatus } = this.state;
        time.beginTime = '';
        time.endTime = '';
        if( range === 'custom' ){
            time.time = '';
        }else{
            time.time = range;
        }
        this.setState({
            timeRange: range,
            timerRangeValue: [],
            time
        },()=>{
            range !== 'custom' ? this.combileChangeOrder() : null;
        })
    }

    // 头部筛选框选择单据时间自定义范围
    // "beginTime":"","billstate":"-1,3","endTime":"","time":"threeMonth"}
    changeOrderTime ( times ){
        let { time, orderStatus } = this.state;
        time.billStatus = orderStatus;
        time.beginTime = times[0];
        time.endTime = times[1];
        this.setState({
            timerRangeValue: times,
            time
        },()=>{
            this.combileChangeOrder();
        })
    }

    // 头部筛选选择单据结合调用
    combileChangeOrder (){
        let { orderStatus, time, pk_org } = this.state;
        // debugger
        let selectObj = [], obj;
        time.billStatus = orderStatus;
        orderStatus.map((item, index)=>{
            obj =  {
                "field":"sign_state",
                "value":{
                    "firstvalue": "1",
                    "secondvalue": ""
                }
            }
            console.log(item, index);
            obj.value.firstvalue = item;
            selectObj.push(obj);
        });
        let conditions = {
            "querycondition":{
                "logic":"and",
                "conditions": selectObj
            },
            "nctz":8
        }
        let allSelect = {};
        Object.assign(allSelect, conditions, time);
        this.props.fliterListData(allSelect);  
    }

    //设置卡片翻页
    setCardPagination(pk_ctrtmng){
        // console.log("pk_psndoc_sub",pk_psndoc_sub,this.props)
        let {cardPagination} = this.props;
        if(typeof(pk_ctrtmng) == 'object' && pk_ctrtmng.constructor == Array){
            pk_ctrtmng = pk_ctrtmng.toString();
        }
        cardPagination.setCardPaginationId({id: pk_ctrtmng, status: 1});
    }
    //卡片翻页事件
    handlePageChange(props,pks){
        this.props.handleCardPagination && this.props.handleCardPagination(pks);
    }

    //操作按钮事件
    handleBotton(a,b){
        this.props.onBtnOperation && this.props.onBtnOperation(a,b);
    }

    //设置查询组织和返回按钮显示隐藏
    showHeadLeftFn(isShow,pk_ctrtmng){
        this.setState({
            isCardFormPage: isShow,
            isCardPaginationVisible: isShow
        },()=>{
            if(!!pk_ctrtmng){
                this.setCardPagination(pk_ctrtmng);
            }
        })
    }

    //获取CardForm Id
    getCardFormId(id){
        this.setState({
            cardFormId: id
        })
    }


    //点击返回按钮事件
    handleBackBtn(){
        let { cardFormId } = this.state;
        let status = this.props.form.getFormStatus(cardFormId);
        if(status == 'edit'){
            this.props.cancelEditStatus && this.props.cancelEditStatus();
        }else{
            this.setState({
                isCardFormPage: false,
                isCardPaginationVisible: false
            })
            this.props.handleBackClick && this.props.handleBackClick();
        }
    }

    //设置卡片翻页显示隐藏
    setCardPaginationVisibleFn(isShow){
        this.setState({
            isCardPaginationVisible: isShow
        })
    }

    //获取header 区域高度
    getHeaderH(){
        return this.refs.getHeaderDom.offsetHeight;
    }

    render(){
        let {button, cardPagination, fromApprove, pk_org, json} = this.props;
        let {isCardFormPage, isCardPaginationVisible, orgValue, orderStatus, timeRange, timerRangeValue} = this.state;
        let {createButtonApp} = button;
        const {createCardPagination} = cardPagination;
        let orderStatusList = this.getOrderStatusList();
        let timeRangeList = this.getTimeRangeList();
        return (
            <div className="header nc-bill-header-area" ref="getHeaderDom">
                { fromApprove ? null :
                    <div className={'leftDepartmentChoose'}>
                        <div className={isCardFormPage ? '' : 'hide'}>
                            <NCBackBtn onClick={ this.handleBackBtn }> </NCBackBtn>
                        </div>
                        <div className={isCardFormPage ? 'hide' : ''}>
                            <ReferSearch
                                orgVal={orgValue}
                                getOrgData={this.searchOrganization.bind(this)}
                            /> 
                            { !!pk_org && !!orderStatusList ? <React.Fragment>
                                <span className="top-applyStatus">
                                    <NCSelect
                                        multiple={true}
                                        showClear={false}
                                        style={{
                                            width: '160px'
                                        }}
                                        placeholder={'全部'}
                                        onChange={this.changeOrderStatus}
                                        value={orderStatus}
                                    >
                                        {orderStatusList.map((item) => {
                                            return (
                                                <NCOption
                                                    key={item.key}
                                                >
                                                    {item.label}
                                                </NCOption>
                                            );
                                        })}
                                    </NCSelect>
                                </span>
                                <span className="top-timeRange">
                                    <NCSelect
                                        style={{
                                            width: '140px'
                                        }}
                                        showClear={false}
                                        onChange={this.changeOrderRange}
                                        value={timeRange}
                                    >
                                        {Object.keys(timeRangeList).map((key) => {
                                            return (
                                                <NCOption
                                                    key={key}
                                                >
                                                    {timeRangeList[key]}
                                                </NCOption>
                                            );
                                        })}

                                    </NCSelect>
                                </span>
                                {timeRange === 'custom' ? <span
                                        className="top-timeRange"
                                        style={{
                                            width: '213px'
                                        }}
                                    >
                                        <NCRangePicker
                                            placeholder={'开始日期 - 结束日期'}
                                            onChange={this.changeOrderTime}
                                            value={timerRangeValue}
                                        />
                                    </span> : null}
                            </React.Fragment> : null }
                            
                        </div>
                    </div> 
                }
                
                {/* 按钮区  btn-group */}
                <div className="btn-group">
                    {createButtonApp({
                        area: 'head',//按钮注册中的按钮区域
                        buttonLimit: 1,
                        onButtonClick: (props, btncode) => this.handleBotton(props, btncode),
                        popContainer: document.querySelector('.header-button-area')
                    })}
                    <span className="pagination-card">
                        {
                            isCardPaginationVisible ?  
                                createCardPagination({ 
                                    handlePageInfoChange: this.handlePageChange.bind(this)
                                })
                            : null
                        }
                    </span>
                </div>
            </div>
        )
    }
}

export default Header;